<template>
	<view class="car">
		<view class="mask" @click="hideCar"></view>
		<view class="main">
			<view class="main_title">
				<img src="../../../static/tab/menu.svg" alt="" class="main_title_icon"/>
				<text class="text" @click="clearList ">清空已点</text>
			</view>
			<view class="main_box">
				<scroll-view class="scroll_hei" scroll-y scroll-with-animation enhanced :show-scrollbar="false">
					<view class="main_box_item" v-for="(item,index) in carlist" :key="item.name">
						<img :src="item.image" alt="" class="main_box_item_img"/>
						<div class="main_box_item_right">
							<div class="infor_title">{{item.name}}</div>
							<view class="infor_price">
								<view class="infor_price_left">￥{{item.totalPrice}}</view>
								<view class="infor_price_right">
									<img v-if="item.quantity > 0" src="../../../static/tab/add.svg" alt="" class="infor_price_right_img" @click="handleCarNum(index,'reduce',item)"/>
									<view v-if="item.quantity > 0" class="infor_price_text">{{item.quantity}}</view>
									<img  src="../../../static/tab/reduce.svg" alt="" class="infor_price_right_img" @click="handleCarNum(index,'add',item)" />
									
								</view>
								
							</view>
						</div>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			carlist:Array,
		},
		data() {
			return {
				
			}
		},
		mounted() {
		},
		methods: {
			hideCar() {
				this.$emit('hideParentCar')
			},
			handleCarNum(i,tag,item) {
				this.$emit('handleCarNum',{i,tag,item})
			},
			clearList() {
				this.$emit('clearList')
			}
		}
	}
</script>

<style>
	.car {
		position: fixed;
		top:0;
		left:0;
		right:0;
		bottom:120rpx;
		
	}
	.mask {
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
	}
	.main {
		position: fixed;
		left:0;
		right:0;
		bottom:120rpx;
		width: 100%;
		height: 700rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		animation-name: move-up;
		animation-duration: 0.4s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}
	.main_box {
		height: calc(100% - 86rpx);
	}
	.main_title {
		display: flex;
		justify-content: flex-end;
		height: 60rpx;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #ccc;
	}
	.main_title_icon {
		width: 30rpx;
	}
	.text {
		font-size: 20rpx;
		margin-left: 10rpx;
		color: #ccc;
	}
	.main_box_item {
		display: flex;
		margin-top: 20rpx;
		padding: 0 20rpx;
	}
	.main_box_item_img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		background-color: pink;
	}
	.main_box_item_right {
		flex:1;
		font-size: 20rpx;
		padding:10rpx 20rpx;
		display: flex;
		flex-direction: column;
	}
	.infor_title {
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
	}
	.infor_price {
		display: flex;
		align-items: center;
		margin-top: auto;
	}
	.infor_price_left {
		color:red;
		font-weight: 800;
		font-size: 32rpx;
	}

	.infor_price_right {
		margin-left:auto;
		display: flex;
		align-items: center;
	}
	.infor_price_right_img {
		width: 50rpx;
		height: 50rpx;
	}
	.infor_price_text {
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		padding: 0 40rpx;
	}
	
	@keyframes move-up {
		0% {
			 transform: translateY(16%)
			}
		100%{
			transform: translateY(0)
		}
	}
	.scroll_hei {
		height: 100%;
	}
</style>
